<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>

    <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="/statics/css/register.css">
    <!-- 网页icon头像 -->
    <link rel="shortcut icon" href="/statics/img/tianqi.png">

</head>

<body>
    <!-- 整体布局 -->
    <div id="container">
        <div class="row">
           
            <!-- 注册框 -->
            <div id="registerBox" class="shadow-lg">
                <!-- 注册表单 -->
                <form id="registerForm" action="/registerDone" method="POST">
                    <!-- 注册整体布局 -->
                    <div id="registerLayout">
                        <div id="titleText">
                            <h3>
                                <p class="text-success" style="margin-left: 80px;">注册</p>
                            </h3>
                        </div>
                        <div class="form-group">
                            <label for="username">用户名:</label>
                            <input type="text" class="form-control" name="name_username" id="usernameBoxId">
                            <label for="" class="errorHint1 invisible" style="color: red;">请输入用户名</label>
                        </div>
                        <!-- 错误提示 -->
                        <!-- <div class="errorMessage">
                用户名为空或密码为空或两次密码输入不一致
            </div> -->
                        <div class="form-group">
                            <label for="pwd">密码:</label>
                            <input type="password" class="form-control" name="name_pwd" id="pwdBoxId">
                            <label for="" class="errorHint2 invisible" style="color: red;">请输入密码</label>
                        </div>
                        <div class="form-group">
                            <label for="againPwd">确认密码:</label>
                            <input type="password" class="form-control" name="name_againPwd" id="againPwdBoxId">
                            <label for="" class="errorHint3 invisible" style="color: red;">两次密码不一致</label>
                        </div>



                        <div id="loginAndregister">
                            <input type="button" class="btn btn-primary" value="取消" name="" id="loginButton"
                                onclick="cancelJump()" style="margin-left: 75px;">
                            <input type="button" class="btn btn-primary" value="注册" name="" id="registerButton"
                                onclick="registrationRequirements()">
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>


    <script src="/statics/js/jquery-3.6.0.min.js"></script>
    <script src="/statics/js/bootstrap.min.js"></script>


   <!-- 注册按钮点击判断 -->
   <script>
    function registrationRequirements() {
        var username = $('#usernameBoxId').val().trim() || '';;
        var password = $('#pwdBoxId').val().trim() || '';;
        var againpassword = $('#againPwdBoxId').val().trim() || '';;
        //用户名长度大于0并且密码长度大于0并且密码等于确认密码则提交表单 
        if (username.length > 0 && password.length > 0 && password === againpassword) {
            $('#registerForm').submit();    // 提交表单
        } else if (username.length === 0) {    // 用户名为空
            // $('div').removeClass('errorMessage');    //.removeClass(errorMessage)清除.errorMessage的class的css属性
            fn_errorHint1('请输入用户名');  // 用户名下面的错误提示函数
        } else if (username.length > 10) {
            fn_errorHint1('亲，用户名不能超过10个字符哦')
        } else if (password.length === 0) {
            fn_errorHint2('请输入密码');    // 密码下面的错误提示函数
        } else if (againpassword.length === 0) {
            fn_errorHint3('请再确认一次密码，以防出错');
        } else if (password !== againpassword) {    // 确认密码下面的错误提示函数
            fn_errorHint3('出错了啦，两次密码不一致');
            return false;
        }
    };
    // 用户名下面的错误提示函数
    function fn_errorHint1(errorHint) {
        $('.errorHint1').text(errorHint);
        $('.errorHint1').removeClass('invisible');
        setTimeout(() => {
            $('.errorHint1').addClass('invisible');
        }, 3000);
    }
    // 密码下面的错误提示函数
    function fn_errorHint2(errorHint) {
        $('.errorHint2').text(errorHint);
        $('.errorHint2').removeClass('invisible');
        setTimeout(() => {
            $('.errorHint2').addClass('invisible');
        }, 3000);
    }
    // 确认密码下面的错误提示函数
    function fn_errorHint3(errorHint) {
        $('.errorHint3').text(errorHint);
        $('.errorHint3').removeClass('invisible');
        setTimeout(() => {
            $('.errorHint3').addClass('invisible');
        }, 3000);
    }
    console.log(registrationRequirements());
</script>


    <!-- 取消按钮点击效果 -->
    <script>
        function cancelJump() {
            window.location.href = '/'
        };
    </script>

</body>


</html>